<template>
	<view class="root">
		<!-- 使用 common-title 组件 -->
		<view class="title-bar">
			<common-title :title="pageTitle" :showBack="false"></common-title>
			<view class="top-right" style="background-color: '#0F6AF8';" @click="publishLeaveMsg()">
				<image src="/static/icon_send.png"></image>
				<view>发布留言</view>

			</view>
		</view>



		<scroll-view scroll-y="true" class="scroll-Y" v-if="!DataUtils.isEmpty(leaveList)" refresher-enabled="true"
			:refresher-triggered="triggeredRef" :refresher-threshold="100" @refresherpulling="onPulling"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
			<uni-list :border="false">
				<view v-for="(item, index) in leaveList" :key="index" class="news-item">

					<view class="news-index">{{index+1}}</view>
					<view class="news-title">{{item.name}}</view>
					<view class="news-type">{{item.recipientName}}</view>
					<view class="news-date">{{item.recipientTime}}</view>
					<view class="news-status">
						<view :class="readStatusClass(item)"></view>
						<text>{{item.readingStatusName}}</text>
					</view>
					<view class="news-operate">

						<view class="news-detail" @click="jumpDetailPage(item)"></view>
						<view class="news-delete" @click="jumpDetailPage(item)">详情</view>
					</view>

				</view>

			</uni-list>

		</scroll-view>
		<scroll-view scroll-y="true" class="scroll-Y" refresher-enabled="true" :refresher-triggered="triggeredRef"
			:refresher-threshold="100" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore" @refresherabort="onAbort" v-else>
			<NoData></NoData>
		</scroll-view>


	</view>
</template>

<script setup>
	import * as httpConfig from "../../common/http-config.js";
	import * as DataUtils from "../../utils/DataUtils";
	import CommonTitle from '@/components/common-title.vue';
	import NoData from '@/components/no-data.vue';
	import {
		ref,
		onMounted,
		onUnmounted,
		computed,
		defineComponent,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow,
		onHide
	} from '@dcloudio/uni-app'

	const triggeredRef = ref(true)

	const onPulling = (e) => {
		console.log("onPulling")

	}
	const onRefresh = () => {
		console.log("onRefresh")
		triggeredRef.value = true; // 开始刷新
		messageRecordList()
	}
	const orgIdRef = ref(null)
	onLoad((option) => {
		orgIdRef.value = option.orgId;
		console.log("orgId = " + orgIdRef.value);
	})

	const onRestore = () => {
		console.log("onRestore")
	}

	const onAbort = () => {
		console.log("onAbort")
	}



	// 使用 onMounted 钩子自动播放视频
	onMounted(() => {
		console.log("组件已经挂载了.......")

	});

	onShow(() => {
		console.log("onShow...")
		messageRecordList()
	})
	onHide(() => {
		console.log("onHide...")

	})


	const pageTitle = ref("留言列表")

	const publishLeaveMsg = () => {
		uni.navigateTo({
			url: 'leave-msg-publish?orgId=' + orgIdRef.value
		});
	}
	const jumpDetailPage = (item) => {
		uni.navigateTo({
			url: 'leave-msg-detail?id=' + item.id
		});
	}
	const readStatusClass = (item) => {
		// 未读
		if (item.readingStatus == "unread") {
			return "view-status-unread"
		} else {
			return "view-status-read"
		}
	}



	const leaveList = ref([])
	//  留言数据列表
	const messageRecordList = () => {
		let data = {
			"currentPage": 1,
			"pageSize": 100
		}
		uni.request({
			url: httpConfig.baseURL + httpConfig.messageRecordList, //留言列表
			method: 'POST', // 请求方法为 POST
			data: data,
			success: (res) => {
				console.log("triggeredRef.value is " + triggeredRef.value)
				triggeredRef.value = false
				if (res.data.code == httpConfig.successCode) {
					console.log('messageRecordList success ' + res.data.data);
					leaveList.value = res.data.data["items"]
				} else {
					uni.showToast({
						title: it.data.message,
						icon: "fail",
						duration: 2000
					});
				}
				// 在这里处理请求成功的情况
			},
			fail: (err) => {
				triggeredRef.value = false
				console.error('messageRecordList fail ');
				uni.showToast({
					title: "获取留言失败" + err,
					icon: "fail",
					duration: 2000
				});
				// 在这里处理请求失败的情况
			}
		});




	}
</script>


<style lang="less" scoped>
	@vw: 8.015vw;
	@vh: 5.4vh;

	.root {
		height: 100vh;
		/* 页面高度为 100% */
		overflow: hidden;
		/* 禁止页面滚动 */
		display: flex;
		flex-direction: column;

		.title-bar {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.top-right {
				width: 92/@vw;
				height: 32/@vh;
				border-radius: 3/@vh;
				background-color: #0F6AF8;
				margin-right: 16/@vw;
				font-size: 13/@vh;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					margin-right: 2/@vw;
					width: 14/@vw;
					height: 14/@vh;
				}
			}
		}

		scroll-view {
			height: 100%;


			.news-item {
				height: 40/@vh;
				background-color: white;
				border: 0.5/@vh solid #D0D6DE;
				border-radius: 2/@vh;
				color: #2C2E30;
				margin-top: 7/@vh;
				margin-left: 12/@vw;
				margin-right: 12/@vw;
				font-size: 13/@vh;
				display: flex;
				flex-direction: row;
				align-items: center;


				.news-index {
					flex: 1;
					margin-left: 16/@vw;
				}

				.news-title {
					flex: 4;
				}

				.news-type {
					flex: 2.5;
				}


				.news-date {
					flex: 4;
				}

				.news-status {
					flex: 1.5;
					display: flex;
					flex-direction: row;
					align-items: center;


				}

				.news-operate {
					flex: 3;
					display: flex;
					flex-direction: row;
					color: #0F6AF8;

					.news-publish {
						flex: 1;

						display: flex;
						flex-direction: row;
						justify-content: center;
					}

					.news-detail {
						flex: 1;

						display: flex;
						flex-direction: row;
						justify-content: center;
					}

					.news-delete {
						flex: 1;

						display: flex;
						flex-direction: row;
						justify-content: center;
					}
				}




			}
		}

	}

	.view-status-unread {
		margin-right: 10/@vw;
		background-color: #FF9B14;
		border-radius: 3/@vw;
		width: 6/@vw;
		height: 6/@vw;
	}

	.view-status-read {
		margin-right: 10/@vw;
		background-color: #4BC04F;
		border-radius: 3/@vw;
		width: 6/@vw;
		height: 6/@vw;
	}
</style>